import dynamic from 'next/dynamic'
import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
import { useRouter } from 'next/router'
import _ from 'lodash'
import Seo from '@/core/components/Seo'
import Promocrumb from '@/lib/promo/components/Promocrumb'
import useBrand from '@/lib/brand/hooks/useBrand'

const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
const Brand = dynamic(() => import('@/lib/brand/components/Brand'))

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query
    console.log("apa itu slug",slug)
  const brandName = getNameFromSlug(slug)
  const id = getIdFromSlug(slug)
  const {brand} = useBrand({id})
  return (
    <BasicLayout>
        {/* seakarang arahkan web untuk menampilkan daftar promo sesuai slug */}
        
      <Seo
        title={`Promo ${slug} Terkini`}
        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
        
      />

      <Promocrumb brandName={slug} />

        harusnya disini menampilkan barang promosimya {slug}


      {/* <Brand brand={brand} />
      {!_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/promo/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
          brand={brand}
        />
      )} */}
    </BasicLayout>
  )
}
